iT邦幫忙

2021 iThome 鐵人賽

DAY 24
1
Modern Web

ZK 30天速成系列 第 24

用科學化除錯方法替你的 zk 程式除錯之一

  • 分享至 

  • xImage
  •  

Steve McConnel 所著的CODE COMPLETE:軟體開發實務指南 中, 第 23 章提到一個科學化的除錯方法,步驟如下:

  1. 可以穩定產生錯誤
  2. 找出錯誤的根因
    a. 收集造成此錯誤的相關資訊
    b. 分析找到的資料並給出一個對根因的假設
    c. 證明或反證該假設
  3. 修正該錯誤
  4. 驗證該修正
  5. 尋找其他同樣的錯誤

我就以這套步驟當作基本原則來說明怎麼幫 ZK 應用程式除錯。

1.可以穩定產生錯誤

這階段目標是找到能產生該錯誤的明確、固定、最少步驟

如果你的步驟不明確、不固定、或步驟很多,這代表似乎每個元件都可能造成問題,那問題範圍就會牽涉太廣,難以找到根因。如果能夠除去一個步驟,仍然能夠重現該錯誤,那就代表該步驟與錯誤無關,可以移除。因此經由反覆測試來減少步驟,就能縮小問題範圍,可以讓你接下來比較容易找到根因。

2.找出錯誤的根因

a. 收集造成此錯誤的相關資訊

伺服器 log 中的(錯誤)訊息

很多人會忽略伺服器印出的 log 內容,但其實它常常明確的表示出問題的根因,如顯示 exception stack trace,我們就可以根據呼叫的 stack 去找出錯誤發生的程式來推測出錯誤根因。

瀏覽器上的錯誤訊息

主流的桌上瀏覽器按 F12 都可以開啟開發者工具,其中 Console 頁會顯示錯誤訊息,這通常也能幫助我們找到根因。 以下是 Chrome 中的開發者工具:

https://ithelp.ithome.com.tw/upload/images/20211009/20050621jXBjqe2ep9.png

縮小問題範圍

為了找到錯誤的根因,縮小問題的範圍將會非常有幫助,因為問題牽涉的範圍越大,潛在造成問題的因素就越多,必須耗費非常多時間一一檢視這範圍裡的每個因素來找出根因,因此縮小問題範圍可以增進除錯的效率。你可用以下作法縮小問題:

  • 移除(不相關的)元件。
    通常 zul 上會有很多元件,但其實真正與錯誤有關的元件不多,因此將其他無關的元件從 zul 中移除可以讓你專注在真正的問題上。
  • 減少重製步驟。
    如果原本要 3 個步驟能重現 bug,若是少做某一個步驟仍然能重現該 bug,就代表那一步跟該 bug 無關,可以省略。
  • 移除(不相關的)程式碼。
    如果一個按鈕按下去,相對應的 event listener 有 500 行,那就得在這 500 行中找問題。如果能移除不相關的程式碼,減少成 100 行,就只需要在這 100 行中找出根因,就可以減少除錯時間。

上一篇
開發過程必備除錯基本知識 - 處理 HTTP 要求的內部運作
下一篇
用科學化除錯方法替你的 zk 程式除錯之二
系列文
ZK 30天速成30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言